<template>
	<div class="goods">
		<div class="menuWrap" ref="menu">
			<ul>
				<li v-for="(item,index) in goods" class="item" :class="{current:currentIndex==index}" @click="selectMenu(index,$event)">
					<span class="name"><span v-if="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}</span>
				</li>
			</ul>
		</div>
		<div class="goodsWrap" ref="good">
			<ul>
				<li v-for="(good,index) in goods" class="good-item good-item-hook">
					<h1 class="title">{{good.name}}</h1>
					<ul>
						<li v-for="food in good.foods" class="foot-item" @click="selectFood(food,$event)">
							<div class="img">
								<img :src="food.icon" :alt="food.name" width="57" height="57"/>
							</div>
							<div class="content">
								<h2 class="name">{{food.name}}</h2>
								<div class="des">{{food.description}}</div>
								<div class="extra">
									<span>月售{{food.sellCount}}份</span><span class="rating">好评率{{food.rating}}%</span>
								</div>
								<div class="price">
									<span class="foodPrice">￥{{food.price}}</span><span v-show="food.oldPrice" class="oldPrice">￥{{food.oldPrice}}</span>
								</div>
								<div class="cart-wrap">
									<cartcontrol v-on:cart-add="cartAdd" :food="food"></cartcontrol>
								</div>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<shopcart ref="shopcart" :select-foods="selectFoods" :deliveryPrice="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>
		<food :food="selectedFood" ref="food" v-on:cart-add="cartAdd"></food> <!-- data中的selectedFood传递进来-->
	</div>
</template>

<script>
import BScroll from 'better-scroll';
import shopcart from "@/components/shopCart/ShopCart"
import cartcontrol from "@/components/cartControl/CartControl"
import food from "@/components/food/Food"
const ERR_OK = 0;
export default {
	props: {
		seller: {
			type: Object
		}
	},
	data() {
		return {
			goods: [],
			foodHeight:[],
			scrollY:0,
			selectedFood:{}
		};
	},
	computed:{
		currentIndex(){
			for(let i=0;i<this.foodHeight.length;i++){
				let height1 = this.foodHeight[i];
				let height2 = this.foodHeight[i+1];
				if(!height2||(this.scrollY>=height1&&this.scrollY<height2)){
					if(this.clickEvent){
						return i=1
					}else{
						return i
					}
				}
				
			}
			return 0
		},
		selectFoods() { //遍历foods，看看选中了哪些商品
		    let foods = [];
		    this.goods.forEach((good) => { //先取到每一个分类
		      good.foods.forEach((food) => { //后取到每一个分类下的不同food
		        if (food.count) {
		          foods.push(food); //两层遍历，取到所有被选中的foods
		        }
		      });
		    });
		    return foods; 
		}
	},
	created() {
		this.classMap = ["decrease", "discount", "special", "invoice", "guarantee"]
		this.$http.get("/api/good").then(response => {
			var res = response.body;
			if(res.errno === ERR_OK) {
				this.goods = res.data;
			}
			this.$nextTick(() => {
				this._initScroll()
				this._getHeight()
			})
			
		});
	},
	methods: {
		selectMenu(index,event){
			if( !event._constructed ){
	        	return;
	        }
			let goodsHeight = this.$refs.good.getElementsByClassName("good-item-hook");
			let ele = goodsHeight[index];
			this.foodScroll.scrollToElement(ele,300);
		},
		cartAdd(target){
			this.$nextTick(()=>{
				this.$refs.shopcart.dropMove(target);
			})
		    
		},
		_initScroll() {
			this.menuScroll = new BScroll(this.$refs.menu, {
				click:true
			})
			this.foodScroll = new BScroll(this.$refs.good, {
				click:true,
				probeType:3
			})
			this.foodScroll.on("scroll",(pos)=>{	
				if( pos.y <= 0 ){
	            	this.scrollY = Math.abs( Math.round(pos.y) );
	           }
			})
		},
		_getHeight(){
			let goodsHeight = this.$refs.good.getElementsByClassName("good-item-hook");
			let height = 0;
			this.foodHeight.push(height);
			for(let i = 0;i<goodsHeight.length;i++){
				let item = goodsHeight[i];
				height+=item.clientHeight
				this.foodHeight.push(height)
			}
			
		},
		selectFood(food,event){
			if (!event._constructed) { //浏览器直接return掉,去掉自带click事件的点击
		        return;
		    }
			this.selectedFood=food;
			this.$refs.food.show()
		}
	},
	components:{
		shopcart,
		cartcontrol,
		food
	}
//	,
//	events:{
//		'cart-add'(target){
//			this.cartAdd(target)
//		}
//	}
};</script>
<style scoped lang="stylus">
	@import '~common/stylus/max.styl';
	.goods
		position:absolute
		width:100%
		top:174px
		bottom:46px
		display:flex
		overflow:hidden
		.menuWrap
			flex:0 0 80px
			width:80px
			background:#f3f5f7
			.item
				display:table
				width:56px
				height:54px
				line-height:14px
				padding:0 12px
				&.current
					position:relative
					margin-top:-1px
					background:#fff
					font-weight:700
					font-size:12px
					border-bottom:none
					.name
						border-bottom:none
				.name
					display:table-cell
					width:56px
					height:54px
					vertical-align:middle
					font-size:12px
					font-weight:200
					border-bottom:1px solid rgba(7,17,27,0.1)
				.icon
					display:inline-block
					vertical-align:top
					width:16px
					height:16px
					margin-right:2px
					background-size:16px 16px
					background-repeat:no-repeat
					&.decrease
						bg-image('decrease_3')
					&.discount
						bg-image('discount_3')
					&.special
						bg-image('special_3')
					&.invoice
						bg-image('invoice_3')
					&.guarantee
						bg-image('guarantee_3')
		.goodsWrap
			flex:1
			.title
				font-size:12px
				color:rgb(147,153,159)
				line-height:26px
				height:26px
				border-left:2px solid #d9dde1
				padding-left:14px
				background:#f3f5f7
			.foot-item
				display:flex
				margin:18px
				padding-bottom:18px
				position:relative
				border-bottom:1px solid rgba(7,17,27,0.1)
				&:last-child
					border-bottom:none
					margin-bottom:0
				.img
					flex:0 0 57px
				.content
					flex:1
					margin-left:10px
					.name
						font-size:14px
						margin:2px auto 8px
						color:rgb(7,17,27)
						height:14px
						line-height:14px
					.des
						font-size:10px
						color:rgb(147,153,159)
						margin-bottom:8px
						line-height:12px
					.extra
						font-size:10px
						color:rgb(147,153,159)
						height:10px
						line-height:10px
						margin-bottom:8px
						.rating
							margin-left:12px
					.price
						font-size:0
						.foodPrice
							font-size:14px
							color:rgb(240,20,20)
							font-weight:700
							height:24px
							line-height:24px
							margin-right:8px
						.oldPrice
							font-size:10px
							color:rgb(147,153,159)
							font-weight:700
							height:24px
							line-height:24px
							text-decoration:line-through
					.cart-wrap
						position:absolute
						right:0
						bottom:12px
	
</style>
